<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<style type="text/css">
		body{
			font-family: "微软雅黑";
		}
	</style>
</head>
<body>
<!-- 隐藏城市盒子 -->
<div id="city1">
	<input type="button" name="" value="关闭X" style="float: right;" id="close">
	<p>城市列表</p>
	<div id="city1-1">
		 <ul>
				<li>热门</li>
				<li class="list">北京</li>
				<li class="list">上海</li>
				<li class="list">广州</li>
				<li class="list">天津</li>
				<li class="list">西安</li>
				<li class="list">深圳</li>
				<li class="list">武汉</li>
				<li class="list">成都</li>
				<li class="list">重庆</li>
				<li class="list">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</li>
				<li class="list">南京</li>
				<li class="list">沈阳</li>
				<li class="list">杭州</li>
				<li class="list">济南</li>
				<li class="list">郑州</li>
		</ul>
	
	</div>
</div>
<!-- 1 -->
	<div id="zhao"></div>
	<div id="top">
		<ul>
			<li style="width: 110px;"><span id="city">北京</span><a href="#" id="btn">[切换城市]</a></li>
			<li style="border-right: none;">同城帮首页</li>
			<li style="margin-left: 27%">登陆</li>
			<li>注册</li>
			<li>我的订单</li>
			<li style="width: 170px;">在线客服(9:00-21:00)</li>
			<li>客服服务</li>
			<li>论坛</li>
			<li><a href="#" style="color: red;">投诉建议</a></li>
		</ul>
	</div>
<!-- 2 -->
	<div id="nav">
		<ul>
			<li style="margin-left: 0;"><img src="images/35.png"></li>
			<li style="margin-left:360px;">二手优品</li>
			<li>手机回收</li>
			<li>手机维修</li>
			<li>电脑维修</li>
			<li>以旧换新</li>
			<li>手机租用</li>
		</ul>
	</div>
<!-- 3 -->
<div id="lun">
	<div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active"><img src="images/5.png" alt="第一张"></div>
        <div class="item"><img src="images/6.png" alt="第二张"></div>
        <div class="item"><img src="images/34.jpg" alt="第三张"></div>
    </div>

    <!-- <a href="#myCarousel" data-slide="prev" class="carousel-control left"> -->
        <span class="glyphicon glyphicon-chevron-left aria-hidden='true'"></span>  <!--&lsaquo;-->
    </a>
    <!-- <a href="#myCarousel" data-slide="next" class="carousel-control right"> -->
        <span class="glyphicon glyphicon-chevron-right aria-hidden='true'"></span> <!--&rsaquo;-->
    </a>
</div>
<!-- 定位 -->
	<div id="kuang">
		<ul>
			<li><img src="images/2_03.png"><span style="margin-left: 20px;">修手机/Pad</span>  ></li>
			<li><img src="images/2_06.png"><span style="margin-left: 20px;">修电脑</span>  ></li>
			<li><img src="images/2_08.png"><span style="margin-left: 20px;">卖手机/电脑</span> ></li>
			<li><img src="images/2_10.png"><span style="margin-left: 20px;">买二手</span>  ></li>
		</ul>

	</div>
</div>
<!-- 手机换屏 -->
<div id="center1">
	<p class="tan"><img src="images/t01aad5c130b8653368.jpg"></p>
	<p class="tan"><img src="images/t01aad5c130b8653368.jpg"></p>
	<p class="tan"><img src="images/t01aad5c130b8653368.jpg"></p>
	<p class="tan"><img src="images/t01aad5c130b8653368.jpg"></p>
</div>
<!-- 热门手机回收 -->
<h3 id="hot">热门手机回收</h3>
<div id="guzhi">
	<p style="float: left;"><img src="images/4_03.png" style="height: 100%;"></p>
	<li class="one"><img src="" style="margin-left:50px;margin-top:30px; width:50%"><h5></h5></li>
	<li class="one"><img src="" style="margin-left:50px;margin-top:30px; width:50%"><h5></h5></li>
	<li class="one"><img src="" style="margin-left:50px;margin-top:30px; width:50%"><h5></h5></li>
	<li class="one"><img src="" style="margin-left:50px;margin-top:30px; width:50%"><h5></h5></li>
	<li class="one"><img src="" style="width: 100%; margin-top:30px;"><h5></h5></li>
</div>
<h3 id="hot" style="margin-top:11px;">优品精选</h3>
<div id="guzhi">
	<p style="float: left;"><img src="images/4_06.png" style="height: 100%; margin-left: 3px;"></p>
	<li class="two"><img src="" style="width:70%;margin-top:50px; margin-left: 3px;"><h5><span></span><span></span></h5><h4></h4></li>
	<li class="two"><img src="" style="width:70%;margin-top:50px; margin-left: 3px;"><h5><span></span><span></span></h5><h4></h4></li>
	<li class="two"><img src="" style="width:70%;margin-top:50px; margin-left: 3px;"><h5><span></span><span></span></h5><h4></h4></li>
	<li class="two"><img src="" style="width:70%;margin-top:50px; margin-left: 3px;"><h5><span></span><span></span></h5><h4></h4></li>
	<li class="two"><img src="" style="width:70%;margin-top:50px; margin-left: 3px;"><h5><span></span><span></span></h5><h4></h4></li>
</div>
<h3 id="hot" style="margin-top:10px;">到店维修</h3>
<div id="bottom">
	<div id="qq">北京<img src="images/2313213_03.jpg"></div>
	<div id="qq">选择区县<img src="images/2313213_03.jpg"></div> 
	 <input type="text" name="" placeholder="输入您的位置查找附近的商家" style="width: 400px;height: 50px; border:1px solid green; margin-left: 10px;"><input type="text" name="" value="搜索" style="width: 100px;height: 50px;color: white;background: green; border:1px solid green;text-align: center">
	 <div id="big">
	 <!-- 下面左边的盒子 -->
		<div id="left">
			<div id="left1">
				<li>默认排序</li>
				<li>按成交量</li>
				<li>按人气</li>
				<li><input type="checkbox" name="">先行赔付</li>
				<li style="margin-left:300px;"><img src="images/1.png"></li>
			</div>
			<div id="left2">
				<ul class="ww">
				<li><img src=""  style="width:100px"></li>
				<li><p></p><p></p><p></p></li>
				<li><p><img src="">先行赔付</p><p><img src="">同城帮认证</p><p></p></li>
				</ul>
				<ul class="ww">
				<li><img src="" style="width:100px"></li>
				<li><p></p><p></p><p></p></li>
				<li><p><img src="">先行赔付</p><p><img src="">同城帮认证</p><p></p></li>
				</ul>
				<ul class="ww">
				<li><img src="" style="width:100px"></li>
				<li><p></p><p></p><p></p></li>
				<li><p><img src="">先行赔付</p><p><img src="">同城帮认证</p><p></p></li>
				</ul>
				<ul class="ww">
				<li><img src="" style="width:100px"></li>
				<li><p></p><p></p><p></p></li>
				<li><p><img src="">先行赔付</p><p><img src="">同城帮认证</p><p></p></li>
				</ul>
				<ul class="ww">
				<li><img src="" style="width:100px"></li>
				<li><p></p><p></p><p></p></li>
				<li><p><img src="">先行赔付</p><p><img src="">同城帮认证</p><p></p></li>
				</ul>
			</div>
		</div>
		<!-- 下面右边的盒子 -->
		<div id="right">
			<h4 id="hh">
				商家好评榜
			</h4>
			<ul>
				<li>1 <img src="images/3.jpg"><span>炼金城维修中心</span><br><span style="margin-left: 110px">121324条评论</span></li>
				<li>2 <img src="images/24.jpg"><span>顺通电脑维修</span><br><span style="margin-left: 110px">111105条评论</span></li>
				<li>3 <img src="images/32.gif"><span>盛宏科技CBD维修工作</span><br><span style="margin-left: 110px">98580条评论</span></li>
				<li>4 <img src="images/23.jpg"><span>百佳电脑维修</span><br><span style="margin-left: 110px">50689条评论</span></li>
				<li>5 <img src="images/9.gif"><span>鸿翔科技北京有限</span><br><span style="margin-left: 110px">322112条评论</span></li>
				<li>6 <img src="images/25.jpg"><span>北京开天科技维修中心</span><br><span style="margin-left: 110px">15213条评论</span></li>
				<li>7 <img src="images/9.gif"><span>sssss中兴电脑维修</span><br><span style="margin-left: 110px">12209条评论</span></li>
			</ul>
		</div>
	 </div>
</div>

</body>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
// 轮播图
$("#myCarousel").carousel({
            interval:1000,
            pause:'hover',
            wrap:true
        });
// 点击切换城市
$("#btn").on("click",function(){
	$("#city1").css("display","block");
})
$("#close").on("click",function(){
	$("#city1").css("display","none");
})
for(var i = 0;i < 15;i++){
	$(".list").eq(i).on("click",function(){
		$("#city").html($(this).html());
		$("#city1").css("display","none");

	})
}
//热门手机回收
$.get("http://localhost:3000/json/rmsjhs.json",function(data){
	// console.log(data.result);
	var a1 = data.result;
	for (var i = 0; i < a1.length; i++) {
	       $(".one").eq(i).children("img").attr("src",a1[i].img_url);
	       $(".one").eq(i).children("h5").html(a1[i].model_alis);         	         	
	  }
})
//优品精选
	$.get("http://localhost:3000/json/ypjx.json",function(data){
	// console.log(data.result);
	var a2 = data.result;
	for (var i = 0; i < a2.length; i++) {
	       $(".two").eq(i).children("img").attr("src",a2[i].thum_img.big);
	       $(".two").eq(i).children("h4").html(a2[i].price);
	       $(".two").eq(i).children("h5").children("span").eq(0).html(a2[i].brand_name);         
	       $(".two").eq(i).children("h5").children("span").eq(1).html(a2[i].model_name);	         	
	  }
})
//下面
	$.get("http://localhost:3000/json/bottom.json",function(data){
		// console.log(data.shop_data);
		var a3 = data.shop_data;
		for(var i = 0;i < a3.length;i++){
			$(".ww").eq(i).children("li").eq(0).children("img").attr("src",a3[i].shop_ico);
			$(".ww").eq(i).children("li").eq(1).children("p").eq(0).html(a3[i].shop_name +"&nbsp;店铺等级:");
			$(".ww").eq(i).children("li").eq(1).children("p").eq(1).html("主营:"+a3[i].main);
			$(".ww").eq(i).children("li").eq(1).children("p").eq(2).html("地址:"+a3[i].cuxiao_tip);
			$(".ww").eq(i).children("li").eq(2).children("p").eq(2).html("人气:"+a3[i].shop_visit);
		}
	})

</script>
</html>